import React, { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '@/components/home/header'
import Loading from '@/components/home/loading/saleLoading'
import CoursePlan from '@/components/changeCourse/coursePlan'
import EmptyChange from '@/components/changeCourse/empty'
import BtnGroup from '@/components/changeCourse/btnGroup'
import CourseModal from '@/components/changeCourse/courseModal'
import CourseNoticeBar from '@/components/changeCourse/courseNoticeBar'
import { customToast } from '@/components/customToast/index'
import { getQueryVariable } from '@/utils/http'
import { getTargetPlanList } from '@/api/changeCourse'
import { TargetPlanListData, TargetPlanItem } from '@/types/changeCourse'

const changeCourseList: FC<{}> = () => {
  const stuCouId = getQueryVariable('stuCouId')
  const planId = getQueryVariable('planId')
  const navigate = useNavigate()
  if (!(stuCouId && planId)) {
    navigate('/404')
    return <></>
  }
  const [loading, setLoading] = useState<boolean>(true)
  const [visible, setVisible] = useState<boolean>(false)
  const [btnLoading, setBtnLoading] = useState<boolean>(false)
  const [planData, setPlanData] = useState<Partial<TargetPlanListData>>()
  const [selectItem, setSelectItem] = useState<Partial<TargetPlanItem>>({})
  useEffect(() => {
    getTargetPlanList({ stuCouId: stuCouId, planId: planId }).then((res) => {
      setLoading(false)
      if (res.result.status == 1) {
        setPlanData(res.result.data)
      }
      if (res.result.status == 0 && typeof res.result.data === 'string') {
        customToast({ className: 'custom_toast_normal', text: res.result.data, duration: 2000 })
      }
    })
  }, [])
  const setSelectIdFun = (item: TargetPlanItem) => {
    if (item.planId == selectItem.planId) {
      setSelectItem({})
    } else {
      setSelectItem(item)
    }
  }
  const nextPath = () => {
    if (selectItem.isUpsetPlan === 1) {
      setVisible(true)
    } else {
      setBtnLoading(true)
      pathTo()
    }
  }
  const pathTo = () => {
    navigate(
      '/confirmPlan?stuCouId=' + stuCouId + '&newPlanId=' + selectItem.planId + '&planId=' + planId,
    )
    setBtnLoading(false)
  }
  return (
    <div className="w-full h-full min-h-screen bg-gray-F7F7F8 overflow-auto font-normal font-regular">
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'选择调换讲次'}
        headerColor="bg-white"
        notHeaderColor={false}
      ></Header>
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}
      {planData ? (
        <>
          <CourseNoticeBar content={planData?.msgInfo || ''}></CourseNoticeBar>
          {planData?.planInfo && (
            <div className="px-r0.4 py-r0.4 bg-white overflow-hidden rounded-b-r1.2">
              <CoursePlan item={planData.planInfo}></CoursePlan>
            </div>
          )}
          <div className="mt-r2.0 text-gray-333333 px-r1.2">
            <h3 className="text-r1.3 flex leading-r1.3 font-medium-family mb-r1.2">
              请选择要调入的新讲次
            </h3>
            {planData?.list && planData?.list?.length > 0 ? (
              <>
                {planData.list.map((val, index) => (
                  <div
                    key={index}
                    className="bg-white flex px-r1.2 py-r2.0 rounded-r0.8 mb-r1.0"
                    onClick={() => setSelectIdFun(val)}
                  >
                    <div className="w-r1.6 h-r3.0 mr-r1.2 pt-r0.7">
                      {selectItem.planId == val.planId ? (
                        <i className="text-r1.6 leading-r1.6 iconfont icon-icon_selected"></i>
                      ) : (
                        <i className="text-r1.6 leading-r1.6 iconfont icon-icon_unselected"></i>
                      )}
                    </div>
                    <div className="flex flex-1 justify-between items-center">
                      <div className="text-r1.4 leading-r1.6 pr-r1.2 w-r21.0 font-medium-family">
                        {val.dateDesc}
                      </div>
                      <ul
                        className="relative overflow-x-auto flex no-scrollbar m-0"
                        style={{ maxWidth: '10rem' }}
                      >
                        {val.teacherInfo.map((val, key) => (
                          <li
                            key={key}
                            className="flex flex-shrink-0 items-center"
                            style={{ maxWidth: '10.5rem' }}
                          >
                            <img
                              src={val.imgUrl}
                              className="w-r3.0 h-r3.0 rounded-full mr-r0.4 bg-gray-F7F7F8"
                              alt=""
                            />
                            <dl
                              className="text-gray-999999 text-r1.3 leading-r1.3 mb-0"
                              style={{ maxWidth: '6.5rem' }}
                            >
                              <dt className="font-normal">授课</dt>
                              <dd className="text-gray-333333 mb-0 truncate mt-r0.4">
                                {val.name || '老师'}
                              </dd>
                            </dl>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                ))}
                <BtnGroup
                  text="下一步"
                  showLeft={false}
                  disabled={!selectItem.planId}
                  loading={btnLoading}
                  btnClick={() => nextPath()}
                ></BtnGroup>
                <CourseModal
                  visible={visible}
                  text={planData.isUpsetInfo?.text || ''}
                  cancelText={planData.isUpsetInfo?.cancel || '取消'}
                  confirmText={planData.isUpsetInfo?.ok || '仍要调入'}
                  onCancel={() => setVisible(false)}
                  onConfirm={() => pathTo()}
                ></CourseModal>
              </>
            ) : (
              <EmptyChange
                style={{ marginTop: '4rem' }}
                content={['暂无可调换课程', '请检查账号是否正确']}
              />
            )}
          </div>
        </>
      ) : (
        <EmptyChange content={['暂无可调换课程']} />
      )}
    </div>
  )
}

export default changeCourseList
